Skip to content

Change homepage masthead for Orange/Sosh #3241

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
vprothais merged 12 commits into from
Dec 1, 2025
Merged

Change homepage masthead for Orange/Sosh #3241

vprothais merged 12 commits into from
Dec 1, 2025

Conversation

@hannahiss
Copy link
Member

@hannahiss hannahiss commented Nov 26, 2025 •
edited
Loading

Types of change

  • Non-breaking change
  • Breaking change (fix or feature that would change existing functionality and usage)

Related issues

Partially fixes #3168
Fixes #3229

Context & Motivation

After adding the possibility to switch the brand from Orange to Sosh, change the masthead (below the header) of the homepage to add a new identity for Sosh

Description

  • new image for Sosh, with color changing depending on the mode light/dark
  • masthead colors changing depending on the mode for Sosh (fixed in always dark mode for Orange)
  • no image on mobile for Orange and Sosh
  • for Orange, black background on tablet/desktop, and primary bg (#141414) on mobile
  • change of token for the vertical divider
  • remove bottom padding on mobile mode, no more usefull since we do not have anymore image on mobile
  • rounded corners on examples for Sosh (and still squared for Orange of course)
    -do not display the command npm i @ouds/web... in the masthead in mobile mode because it cannot be fully displayed without any scrolling see [OUDS] Horizontal scrolling appears on the homepage under 488px width #3229

Checklists

  • I have read the contributing guidelines
  • My change follows the developer guide
  • My change pass all tests
  • My change is compatible with a responsive display
  • I have added tests (Javascript unit test or visual) to cover my changes
  • My change introduces changes to the documentation that I have updated accordingly
    • Title and DOM structure is correct
    • Links have been updated (title changes impact links)
    • CSS for the documentation
  • I have checked all states and combinations of the component with my change
  • I have checked all the impacts for the other components and core behavior (grid, reboot, utilities)

Checklist (for Core Team only)

  • The changes need to be in the migration guide
  • The changes are well displayed in Storybook (be careful if example order has changed for DSM)
  • The changes are compatible with RTL
  • Manually test browser compatibility with BrowserStack (Chrome 120, Firefox 121, Edge 120, Safari 15.6, iOS Safari, Chrome & Firefox on Android)

Progression (for Core Team only)

Live previews

@netlify
Copy link

netlify bot commented Nov 26, 2025 •
edited
Loading

✅ Deploy Preview for boosted ready!

Name Link
🔨 Latest commit 435a75a
🔍 Latest deploy log https://app.netlify.com/projects/boosted/deploys/692dab5862da1100083cdf2f
😎 Deploy Preview https://deploy-preview-3241--boosted.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@hannahiss hannahiss mentioned this pull request Nov 26, 2025
Open
13 tasks
@hannahiss hannahiss marked this pull request as ready for review November 26, 2025 14:45
@boosted-bot boosted-bot moved this from In Progress / Draft to Need Dev Review in 🟣 [Orange-Boosted-Bootstrap] PRs Board Nov 26, 2025
MaxLardenois
MaxLardenois reviewed Nov 28, 2025
View reviewed changes
Copy link
Collaborator

@MaxLardenois MaxLardenois left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These are more discussions than comments per se

site/src/scss/_masthead.scss Outdated
.bd-masthead-bg {
@include media-breakpoint-up(md) {
padding-right: 6rem;
@if ($brand == "orange") {
Copy link
Collaborator

@MaxLardenois MaxLardenois Nov 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shouldn't we have one version as the default? Otherwise we will have a if for each brands. Orange looks more generic with the bg image...
So if (sosh) {...} else {... // only orange for now}

Also we should convince the designers not to do something different for each brands imo...

site/src/components/home/MastHead.astro Outdated
code={`npm i @ouds/web-common@${getConfig().current_version} @ouds/web-${getConfig().brand}@${getConfig().current_version}`}
lang="sh"
/>
<div class="bd-masthead-code mb-scaled-xsmall d-inline-block">
Copy link
Collaborator

@MaxLardenois MaxLardenois Nov 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

On mobile the copy button disappears and the text is not all visible nor accessible through scroll so it's not very useful. I would say hiding the npm install in the masthead on mobile can be ok because it will never be used.

The others in the page are at least selectable/scrollable so it's ok.

@boosted-bot boosted-bot moved this from Need Dev Review to Need Lead Dev Review in 🟣 [Orange-Boosted-Bootstrap] PRs Board Dec 1, 2025
@vprothais vprothais merged commit d91cf5d into ouds/main Dec 1, 2025
14 checks passed
@vprothais vprothais deleted the ouds/main-homepage-bg branch December 1, 2025 15:30
@github-project-automation github-project-automation bot moved this from Need Lead Dev Review to Done in 🟣 [Orange-Boosted-Bootstrap] PRs Board Dec 1, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@MaxLardenois MaxLardenois MaxLardenois left review comments

@vprothais vprothais vprothais approved these changes

Assignees

No one assigned

Labels

None yet

Projects

🟣 [Orange-Boosted-Bootstrap] PRs Board
Archived in project

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@hannahiss @vprothais @MaxLardenois